<template>
  <div class="app-container">
    <!--<h1>开发中...</h1>-->
    <h1 v-if="notIeMsg" class="regColor">请在IE浏览器上浏览</h1>
    <object id="WebPluginActiveX" class="videoHide"
            classid="clsid:0196C135-5143-4B01-BD78-595946CB4840"
            codebase="WebPluginActiveX.cab#version=1,0,0,2" :height="height" width="89%"></object>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "videoPreview",
    data:function(){
      return{
        notIeMsg:false,
        getImgInterval:'',
        height:0
      }
    },
    beforeDestroy:function(){
      if(this.isIe()){
        var ocx=document.getElementById("WebPluginActiveX"),
          _this=this
        function stopvideobyurlFn(port) {
          var stopvediobyip = {
            method:'stopvideobyurl',
            param:{
              url:'rtsp://admin:mv123456@'+_this.BASE.serverIP+':'+port+'/h264/ch1/main/av_stream'
            }
          }

          ocx.PlayerCmd(JSON.stringify(stopvediobyip));
          console.log('关闭端口号', port);
        }
        function stopjpegbyurlFn(imgName) {
          var stopjpegbyurl = {
            method:'stopjpegbyurl',
            param:{
              url:'http://'+_this.BASE.serverIP+':8095/download/'+imgName+'.jpg'
            }
          }
          ocx.PlayerCmd(JSON.stringify(stopjpegbyurl));
          console.log('关闭图片', imgName);
        }

        stopvideobyurlFn(8554)
        stopvideobyurlFn(8555)
        stopjpegbyurlFn('left')
        stopjpegbyurlFn('right')
        console.log('停止视频、停止图片');

        // 销毁onresize事件
        window.onresize=null
      }
    },
    methods:{
      setOcxHeight:function(){
        this.height=window.innerHeight-100
      },
      getImg:function(ocxObject) {
        var strJson = {
          method:'showjpeg',
          param:{
            jpeglist:[
              {
                url:'http://'+this.BASE.serverIP+':8095/download/left.jpg',
                ref_time:1000,
                win_indx:3
              },{
                url:'http://'+this.BASE.serverIP+':8095/download/right.jpg',
                ref_time:1000,
                win_indx:4
              }
            ],
          }
        };
        var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
        console.log('showjpeg参数',JSON.stringify(strJson));
        console.log('showjpeg',result);
      },
      ocxLang:function(ocxObject){
        var strJson = {
          method:'setlanguage',
          param:{
            value:0
          }
        };
        var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
        console.log('setlanguage',result);
      },
      setloguploadflag:function(ocxObject){
        var strJson = {
          method:'setloguploadflag',
          param:{
            value:0
          }
        };
        var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
        console.log('setloguploadflag',result);
      },
      setshowmode:function(ocxObject){
        var strJson = {
          method:'setshowmode',
          param:{
            index:2
          }
        };
        var result = JSON.parse(ocxObject.PlayerCmd(JSON.stringify(strJson)));
        console.log(result,'setshowmode');
        if (result.result != "ok") {
          console.log('初始化模式失败', 'warning');
        } else {}
      },
      startallvedio:function(ocxObject){

        var videoIP="192.168.101.21",
          vedioList=[
            {
              // rtsp_url:'rtsp://'+this.BASE.serverIP+':554/h264/ch1/main/av_stream',
              rtsp_url:'rtsp://admin:mv123456@'+this.BASE.serverIP+':8554/h264/ch1/main/av_stream',
              ip:this.BASE.serverIP,
              user:'admin',
              password:'a12345678',
              index:1,
              protocol:3
            },
            {
              rtsp_url:'rtsp://admin:mv123456@'+this.BASE.serverIP+':8555/h264/ch1/main/av_stream',
              ip:this.BASE.serverIP,
              user:'admin',
              password:'a12345678',
              index:2,
              protocol:3
            }
          ],
          playerJson={
            method:'startallvedio',
            param:{
              vediolist:vedioList,
              sessionid:'aaa',
              user:'bbb'
            }
          }

        var res=ocxObject.PlayerCmd(JSON.stringify(playerJson))
        console.log('播放参数',JSON.stringify(playerJson));
        console.log('播放地址',vedioList);
        console.log('播放全部视频',res);
      },
      isIe:function() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if(isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if(fIEVersion == 7) {
            return 7;
          } else if(fIEVersion == 8) {
            return 8;
          } else if(fIEVersion == 9) {
            return 9;
          } else if(fIEVersion == 10) {
            return 10;
          } else {
            return 6;//IE版本<=7
          }
        } else if(isEdge) {
          return 'edge';//edge
        } else if(isIE11) {
          return 11; //IE11
        }else{
          return false;//不是ie浏览器
        }

        return
        if (!!window.ActiveXObject || "ActiveXObject" in window)
          return true;
        else
          return false;
      }
    },mounted:function () {
      var ocx=document.getElementById("WebPluginActiveX"),
        _this=this
      console.log('ocx',ocx);
      if(!_this.isIe()){
        _this.notIeMsg=true
      }else{
        _this.setOcxHeight()
        setTimeout(function () {
          _this.ocxLang(ocx)
          _this.setloguploadflag(ocx)
          _this.setshowmode(ocx)
          _this.startallvedio(ocx)
          _this.getImg(ocx)
        },1000)
        window.onresize=function () {
          _this.setOcxHeight()
        }
      }
    }
  }
</script>

<style scoped>
  .app-container{
    height: 100%;
  }
  .regColor{
    color:red;
  }
  .previewImg{
    background: #F0F0F0;
    display: inline-block;
  }
  .image{
    width: 500px;
    height: 400px;
  }
</style>
